<!--
 * @Author: zjf
 * @Date: 2023-06-27 18:29:30
 * @LastEditors: zjf
 * @LastEditTime: 2023-07-18 09:25:53
 * @Description: 
-->
<template>
  <div class="module-search-btns">
    <template v-for="item in list">
      <el-button :key="item.id" class="search-btn" type="primary" size="small" @click="drawClick(item)">
        <div class="search-btn-text">
          <img :src="`${rootUrl}img/map/draw/${item.icon}.png`" alt="" srcset="">
          {{item.title}}
        </div>
      </el-button>
    </template>
  </div>
</template>

<script>
import { MapToolsDrawGeometryService } from "@/core/util/draw";
import * as wellknown from "wellknown";
export default {
  props: ['map'],
  data() {
    return {
      list: [
        {
          id: 'circle', // drag_circle
          title: '圈选',
          icon: 'btn-circle',
          active: false,
          type: 'circle',
          desp: '绘制圆形'
        },
        {
          id: 'bbox', // draw_rectangle
          title: '框选',
          icon: 'btn-bbox',
          active: false,
          type: 'rectangle',
          desp: '绘制矩形'
        },
        {
          id: 'polygon', // draw_polygon
          title: '多边',
          icon: 'btn-polygon',
          active: false,
          type: 'polygon',
          desp: '多边形绘制'
        },
        {
          id: 'delete',
          title: '清除',
          icon: 'btn-delete',
          active: false,
          desp: '清空绘制和查询内容'
        },

      ],
      startDraw: false,
      currentSelect: null,
      timer: null,
      drawServiceObj: null,
    };
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.initDrawServiceObj()
    },
    /** 实例化绘制对象       */
    initDrawServiceObj() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (this.map) {
        this.drawServiceObj = new MapToolsDrawGeometryService(this.map);
      } else {
        this.timer = setTimeout(() => {
          this.initDrawServiceObj();
        }, 100);
      }
    },

    /** 执行绘制操作 */
    drawClick(item) {
      switch (item.id) {
        case 'delete':
          this.startDraw = false;
          this.currentSelect = null;
          this.drawServiceObj && this.drawServiceObj.resetDraw();
          this.map.getCanvas().style.cursor = '';
          this.$emit('clear')
          break;
        case 'bbox':
        case 'polygon':
        case 'circle':
          this.startDraw = true;
          this.currentSelect = item.id;
          this.drawServiceObj && this.drawServiceObj.resetDraw();
          this.drawServiceObj && this.drawServiceObj.draw(item.id, (geoJson) => {
            const info = { wkt: wellknown.stringify(geoJson) };
            this.$emit('getGeojson', info)
          });
          break;
        default:
          this.startDraw = false;
          this.drawServiceObj && this.drawServiceObj.resetDraw();
      }
    }

  }
};
</script>
<style lang="scss" scoped>
.module-search {
  &-btns {
    display: flex;
    justify-content: space-between;
    .search-btn + .search-btn {
      margin-left: 10px;
    }
    .search-btn {
      width: 100px;
      padding: 6px 10px;
      background-color: #1b7eff;
      border-color: #1b7eff;
      &-text {
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        font-size: 13px;
        font-weight: 300;
        letter-spacing: 2px;
        justify-content: space-between;
        img {
          height: 16px;
        }
      }
      &:hover {
        background-color: #599df5;
        border-color: #599df5;
      }
    }
  }
}
</style>